<template>
  <div class="container">
    <!-- 搜索框 -->
    <search-com
      ref="searchBox"
      class="search-box"
      :showMoreSearch="showMoreSearch"
      :queryParam="queryParam"
      :searchData="searchData"
      @switchShowMoreSearchState="switchShowMoreSearchState"
    >
      <div slot="btn">
        <template v-if="operationBtnArr.length != 0">
          <el-button
            v-for="item in operationBtnArr"
            :key="item.vModel"
            :type="item.type"
            :size="item.size"
            >{{ item.label }}</el-button
          >
        </template>
      </div>
    </search-com>

    <!-- 表格 -->
    <table-com
      class="table-com"
      :tableHeight="tableHeight"
      :columnData="columnData"
    >
      <template v-slot:data="slotProps">
        <div>
          {{ slotProps.scope.row[slotProps.item.prop] }}
        </div>
      </template>
    </table-com>

    <!-- 分页 -->
    <pagination ref="pagination" :ipagination="ipagination"> </pagination>
  </div>
</template>

<script>
import SearchCom from "@/components/preview/czyCom/searchCom";
import tableCom from "@/components/preview/czyCom/tableCom";
import pagination from "@/components/preview/czyCom/paginationCom";
import clonedeep from "lodash.clonedeep";
import {
  converterBaseObj,
  converterDateObj,
  converterColObj
} from "@/utils/converterObj";

export default {
  components: {
    SearchCom,
    tableCom,
    pagination
  },
  data() {
    return {
      /* 搜索组件参数 */
      showMoreSearch: true,
      queryParam: {},
      searchData: [],
      operationBtnArr: [],
      /* 表格组件参数 */
      tableHeight: 600,
      columnData: [],
      /* 分页组件参数 */
      ipagination: {
        current: 1,
        pageSize: 100,
        pageSizeOptionsN: [100, 200, 300, 500, 1000],
        pageSizeOptions: ["100", "200", "300", "500", "1000"],
        showTotal: (total, range) => {
          // return range[0] + '-' + range[1] + ' 共' + total + '条'
          return 1 + "-" + 100 + " 共" + 100 + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 560
      }
    };
  },
  mounted() {
    console.log("router params:", this.$route);
    const components = clonedeep(this.$route.params.components);
    this.getFormatEleData(components);
    this.getTableHeight();
  },
  methods: {
    getFormatEleData(components) {
      const packEleDataFuncMap = new Map([
        ["searchBox", this.packSearchBoxData],
        ["tableItem", this.packColumnData]
      ]);
      for (let key of Object.keys(components)) {
        // console.log(key, '===>', components[key]);
        if (packEleDataFuncMap.has(key)) {
          const fn = packEleDataFuncMap.get(key);
          fn(components[key]);
        }
      }
    },
    // 组装搜索框的元素
    packSearchBoxData(originSearchBoxEleArr) {
      const btnEle = originSearchBoxEleArr[originSearchBoxEleArr.length - 1];
      if (btnEle.layout == "operationBtnArr" && btnEle.children.length != 0) {
        this.operationBtnArr = originSearchBoxEleArr.pop().children;
      }
      const formatSearchBoxEleArr = [];
      for (let item of originSearchBoxEleArr) {
        let tempObj;
        if (item.tagIcon === "date-range") {
          // 时间类型
          tempObj = clonedeep(converterDateObj);
        } else {
          // 输入框、下拉框类型
          tempObj = clonedeep(converterBaseObj);
        }
        if (item.tagIcon === "select") {
          // 下拉框类型 追加
          tempObj.optionData = [];
        }
        for (let key of Object.keys(tempObj)) {
          tempObj[key] = item[tempObj[key]];
        }
        formatSearchBoxEleArr.push(tempObj);
      }
      console.log("formatSearchBoxEleArr:", formatSearchBoxEleArr);
      this.searchData = formatSearchBoxEleArr;
    },
    // 组装表格的列元素
    packColumnData(originColumnEleArr) {
      const colObj = clonedeep(converterColObj);
      const formatColArr = [];
      for (let item of originColumnEleArr) {
        const tempObj = {};
        for (let key of Object.keys(colObj)) {
          if (item[colObj[key]]) {
            tempObj[key] = item[colObj[key]];
          }
        }
        formatColArr.push(tempObj);
      }
      console.log("formatColArr:", formatColArr);
      this.columnData = formatColArr;
    },
    // 切换 '更多' / '收起' 按钮
    switchShowMoreSearchState() {
      this.showMoreSearch = !this.showMoreSearch;
      this.getTableHeight();
    },
    getTableHeight() {
      this.$nextTick(() => {
        const searchBoxH = this.$refs["searchBox"]["$el"].offsetHeight;
        const paginationxH = this.$refs["pagination"]["$el"].offsetHeight;
        this.tableHeight = window.innerHeight - searchBoxH - paginationxH - 45;
        console.log("H:", searchBoxH, paginationxH, window.innerHeight);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 98vw;
  padding: 10px;
  .search-box {
  }
  .table-com {
    margin-top: 10px;
  }
}
</style>
